<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影院管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影院列表</el-breadcrumb-item>
         <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
         <el-breadcrumb-item>新增排片计划</el-breadcrumb-item>
         </el-breadcrumb>
     <el-divider></el-divider>
     <p>为 <span style="color:#409eff;font-weight:bold">{{CinemaRoomInfo.cinema_name}}</span>
     的 <span style="color:#409eff;font-weight:bold">{{CinemaRoomInfo.cinema_room_name}}（{{CinemaRoomInfo.cinema_room_type}}）
        </span>添加拍片计划</p>
     <el-divider></el-divider>
     <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="选择电影" prop="movie_id">
<el-select
    v-model="form.movie_id"
    filterable
    remote
    ref="movieSelector"
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
    style="width:400px;"
    >
    <el-option
      v-for="item in movieList"
      :key="item.id"
      :label="item.title"
      :value="item.id">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="放映日期" prop="showingon_date">
          <el-date-picker
          v-model="form.showingon_date"
          type="date"
          placeholder="选择日期"
          value-format='yyyy-MM-dd'
          style="width:190px;"
          >
        </el-date-picker>
        &nbsp;
        <el-time-select
          v-model="form.showingon_time"
          :picker-options="{
           start: '00:00',
           step: '00:30',
           end: '24:00'
         }"
         style="width:190px;"
        placeholder="选择时间">
       </el-time-select>
        </el-form-item>
        <el-form-item label="票价" prop="price">
            <el-input v-model="form.price" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="立即发布" prop="status">
            <el-switch v-model="form.status" style="width:300px;"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="InsertPlan('form')">立即新增该计划</el-button>
          <el-button @click="reset('form')">取消</el-button>
        </el-form-item>
   </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                CinemaRoomInfo:{},//保存放映厅基本信息
                loading:false,//下拉是否在加载
                movieList:'',//电影列表
                form:{
                cinema_id:0,//电影院id
                cinema_room_id:this.$route.params.id,//放映厅id
                movie_id:'',//电影
                price:'',//价格
                status:false,//是否立即上传
                showingon_date:'',
                showingon_time:''
                },
               rules:{
                  movie_id: [{ required: true, message: "请选择电影", trigger: "blur" }],
                  showingon_date:[{required:true,message:'请选择日期',trigger:'blur'}],
                  showingon_time:[{required:true,message:'请选择时间',trigger:'blur'}],
                  price:[
                    {required:true,message:'请输入价格',trigger:'blur'},
                    {parttern:/\d+(.d+)?/,message:'请输入正确的价格',trigger:'blur'},
                    ]
                }
            }
        },
        methods: {
            InsertPlan(form) {
              this.form.cinema_id = this.CinemaRoomInfo.cinema_id
               this.$refs[form].validate((valid) => {
              if (valid) {
               this.form.status = this.form.status ? 1 : 0
              this.$http.showingonPlan.add(this.form).then(res => {
                console.log(res)
                if(res.data.code == 200){
                    let movie_name = this.$refs.movieSelector.selectedLabel
                   this.$notify({
                    title:'添加排片计划成功',
                    message:`${this.CinemaRoomInfo.cinema_name}的
                    ${this.CinemaRoomInfo.cinema_room_name}将会在
                    ${this.form.showingon_date} ${this.form.showingon_time}时上映《${movie_name}》`
                   })
                   this.$router.go(-1)
                }
              })
              } else {
              console.log('error submit!!');
              return false;
             }
          });
            },
            //输入关键字后执行
            remoteMethod(query){
                if(!query){
                    return;
                }else{
                    this.$http.movieapi.ListByname({page:1,pagesize:20,name:query}).then(res => {
                        console.log(res)
                        if(res.data.code ==200){
                            this.movieList = res.data.data.result
                        }
                    })
                }
            },
            /**
             * 加载放映厅基本信息
             */
            loadCurrentCinemaRoom(){
                this.$http.cinemaRoomApi.queryByid({id:this.form.cinema_room_id}).then(res => {
                    console.log(res)
                    if(res.data.code == 200){
                        this.CinemaRoomInfo = res.data.data
                    }
                })  
            }
        },
        mounted () {
            //加载放映厅基本信息
            this.loadCurrentCinemaRoom()
        },
    }
</script>

<style lang="scss" scoped>

</style>